<template>
    <div class="app-container">
        <el-row :gutter="15">
            <el-col :md="12" :sm="24">
                <el-card shadow="hover" class="text-large chart-card">
                    <span class="text-mini title-tip">欢迎您： </span>
                    <el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ nickname | hello }}
                </el-card>
            </el-col>
            <el-col :md="12" :sm="24">
                <el-card shadow="hover" class="text-large chart-card">
                    <span class="text-mini title-tip">所属角色组</span>
                    {{ groups_name || '暂无' }}
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'Index',
    data() {
        return {
            loading: false,
            saleSearch: {
                dateType: 1,
                datetime: '',
            },
            time: 0,
            start_time: new Date(),
            end_time: new Date(),
            us_time: 0,
            eur_time: 0,
        }
    },
    computed: {
        ...mapGetters(['avatar', 'nickname', 'groups_name']),
    },
    created() {
        this.now();
    },
    methods: {
        // 北京时间
        now() {
            this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            setInterval(() => {
                this.us_time = new Date().getTime() - 15 * 3600 * 1000;
            }, 1000)
            this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            setInterval(() => {
                this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            }, 1000)
        },
        
        searchs() {
            this.saleSearch.dateType = -1;
            this.day_changes = 101;
            if(this.saleSearch.datetime == undefined || this.saleSearch.datetime == null || this.saleSearch.datetime == ''){
                this.$message.error('请筛选时间');
                return false;
            }else{
                this.start_time = this.saleSearch.datetime[0]
                this.end_time = this.saleSearch.datetime[1]
            }
            this.handleSkuFind();
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
